<template>
	<view class="goodsbase" :class="themeName">
		<view class="title" :style="{
		      'background-color': styles.bg_color,
		      'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`,
		      'margin': `${$px2rpx(styles.margin_top)}rpx ${$px2rpx(styles.margin_horizontal)}rpx ${$px2rpx(styles.margin_bottom)}rpx`,
			  'padding': `${$px2rpx(styles.sub_padding_top)}rpx ${$px2rpx(styles.sub_padding_horizontal)}rpx ${$px2rpx(styles.sub_padding_bottom)}rpx`,
		    }">
			<view class="title-style1 flex-col col-center">
				<view class="title-content" :style="{
		          color: styles.title_color,
		          'font-size': `${$px2rpx(styles.title_font_size)}rpx`,
		        }">
					{{ content.title || '商品信息' }}
				</view>
			</view>
			<view>
				<view :style="{
		          'margin': `${$px2rpx(styles.field_margin_top)}rpx 0 ${$px2rpx(styles.field_margin_bottom)}rpx`,
		          'color': item.title_color,
		        }" v-for="item, idx in content.data" :key="idx">
					{{ item.nickname }}:{{ other_field_data[item.field_name]||'' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
			other_field_data: {
				type: [Object, Array],
				default: () => ([])
			},
		},
		data() {
			return {

			}
		},
		methods: {},
		computed: {}
	};
</script>

<style lang="scss" scoped>
	.title {

		.title-content {
			font-size: 16px;
			font-weight: 500;
		}

		.title-style1 {
			text-align: center;

			.title-content {
				display: inline-flex;
				align-items: center;

				&::before,
				&::after {
					content: "";
					display: inline-block;
					width: 49px;
					height: 1px;
					margin: 0 10px;
					background: #dcdfe6;
				}
			}
		}
	}
</style>